画面にドロワーを追加する
マテリアル デザインを使用するアプリでは、 ナビゲーションには、タブとドロワーという 2 つの主なオプションがあります。 タブをサポートするための十分なスペースがない場合、 ドロワーは便利な代替手段を提供します。
Flutter では、Drawer
ウィジェットとの組み合わせScaffold
マテリアル デザイン ドロワーを使用してレイアウトを作成します。
このレシピでは次の手順を使用します。
- を作成します
Scaffold
。 - 引き出しを追加します。
- 引き出しにアイテムを入れます。
- ドロワーをプログラム的に閉じます。
Scaffold
1.ドロワーをアプリに追加するには、ドロワーをScaffold
ウィジェット。
のScaffold
ウィジェットは、アプリに一貫した視覚構造を提供します。
マテリアル デザイン ガイドラインに従ってください。
特殊なマテリアルデザインにも対応
Drawers、AppBars、SnackBars などのコンポーネント。
この例では、Scaffold
とともにdrawer
:
Scaffold(
drawer: // Add a Drawer here in the next step.
);
2.引き出しを追加する
ここで引き出しを追加しますScaffold
。ドロワーには任意のウィジェットを使用できます。
しかし、多くの場合、Drawer
のウィジェットマテリアルライブラリ、
これはマテリアル デザイン仕様に準拠しています。
Scaffold(
drawer: Drawer(
child: // Populate the Drawer in the next step.
),
);
3. 引き出しにアイテムを入れます
これで、Drawer
適切な場所にコンテンツを追加します。
この例では、ListView
。
を使用することもできますが、Column
ウィジェット、ListView
ユーザーがスクロールできるので便利です
引き出しを通して
コンテンツは画面がサポートする以上のスペースを必要とします。
にデータを入力します。ListView
とともにDrawerHeader
そして2つListTile
ウィジェット。
リストの操作の詳細については、
を見てくださいレシピをリストする。
Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Item 1'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
],
),
);
4. ドロワーをプログラムで閉じます
ユーザーが項目をタップした後、ドロワーを閉じたい場合があります。
これを行うには、Navigator
。
ユーザーがドロワーを開くと、Flutter はドロワーをナビゲーションに追加します
スタック。したがって、引き出しを閉じるには、次のように呼び出します。Navigator.pop(context)
。
ListTile(
title: const Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
インタラクティブな例
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const appTitle = 'Drawer Demo';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: const Center(
child: Text('My Page!'),
),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
],
),
),
);
}
}